前言

經過前兩篇的轟炸，今天來說點輕鬆的。

在昨天完成了 SCSS 後，應該會有些體會，例如：「天吶，只要修改一點程式碼，就需要重新編譯，這真的合理嗎？」

不合理！

修改完還要重新整理是一件很麻煩的事情，想想你的 F5 或是 command + R，它們平常就很辛苦了，所以在寫網站的時候，通常會搭配 Hot Module Replacement，也就是俗稱的熱刷新，

它在執行時會在本機開啟一個 Port，並將目前執行的專案運行在上面，且只要有修改，都會即時刷新頁面上的內容。

前置準備

1. 文中的專案會以前一天的專案架構繼續講解，如果未跟到前一天的進度，可以從 GitHub 上 Clone 下來。
2. 一顆擁有學習熱忱的心。

使用方法

安裝 webpack-dev-server

npm install webpack-dev-server --save-dev

設置 webpack-dev-server

開啟 webpack.config.js，為了讓 webpack-dev-server 順利執行，我們需要進行一些設置：

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist/'),
  },
 
  /*其餘省略*/
 
  devServer: {
    contentBase: './dist',
    port: 8080,
  },
};

上方 devServer 中的內容，分別指定了 webpack-dev-server 要去讀哪個路徑，及要運行在本機的哪個 Port。

Port 的部分只要不衝突就行了，路徑的部分記得要和上方打包時的 output.path 相同。

設定指令

開啟 package.json，在 script 中添加指令：

/* 其餘省略 */
"scripts": {
  /* 其餘省略 */
  "start": "webpack-dev-server"
},

感謝邦友 matuyou0301 留言補充：

如果有人遇到無法執行的問題~
For webpack-cli 3.x:

"scripts": { "start:dev": "webpack-dev-server" }

For webpack-cli 4.x:

"scripts": { "start:dev": "webpack serve" }

運行 webpack-dev-server

在終端機中執行指令 npm run start，會跳出以下畫面，如果看到最後一行的 Compiled successfully. 就代表成功運行，如果有錯誤的話再麻煩截圖留言讓我看看：

接著打開瀏覽器，在網址列輸入 http://localhost:8080， 就能夠看到運行的畫面了：

此時，在 webpack-dev-server 運行的期間更動程式碼，例如字體顏色，儲存後，webpack-dev-sever 就會自動重新編譯，並刷新網頁上的畫面：

但是要注意！webpack-dev-server 的刷新，並不會更動到 dist 內的檔案，它只負責將結果運行在本機上，僅此而已。

當要更新時，還是得透過 npm run build，也就是 webpack -p，才能將最新的內容打包編譯 。

本文的原始碼內容一樣會放置於 GitHub 上，歡迎各位參考使用。

結尾

要是沒有 webpack-dev-server 或其他熱刷新，對前端來說真的是一件非常痛苦的事情，今天的內容比較簡單，如果文章中有問題或是不清楚的部分，再麻煩各位留言告訴我，謝謝大家！